<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>P267-margin-left-负值</title>
</head>

<style>
   * {
      padding: 0;
      margin: 0; 
   }

   ul {
       display: block;
       margin-left: 100px;
   }

   li {
       float: left;

       height: 200px;
       width: 200px;
       border: 8px solid pink;
        list-style: none;

        /* UI效果: li与li之间只有一个border宽度 */
        margin-left : -8px;

   }

   li:hover {
       position: relative;

       /* 自己摸索：hover变大？哈哈哈 */
       height: 210px;
       width: 210px;
       border: 8px solid blue;
   }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>